<template>
	<div class="login">
		<div class="logo">
			<img src="../../../assets/image/login/d.png" title="logo"
				:class="['logo-icon',props.menuSpread?'logo-icon-colse':'']" />
		</div>
		<div>
			<el-menu :default-active="menuIndex" class="el-menu-vertical-demo" background-color="#2f3447"
				text-color="#fff" active-text-color="#fff" :collapse="props.menuSpread"
				:unique-opened="true">
				<el-sub-menu v-for="(item,index) in menuJson" :key="index" :index="index">
					<template #title>
						<i :class="item.icon"></i>
						<span>{{item.name}}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item v-for="(item_c,index_c) in item.children"
							@click="choice(item.name,item_c,item_c.id)" :key="index_c" :index="item_c.id">
							{{item_c.name}}
						</el-menu-item>
					</el-menu-item-group>
				</el-sub-menu>
			</el-menu>
		</div>
	</div>
</template>
<script setup>
	import menuJson from './data.js'
	import {
		defineProps,
		defineEmits,
		onMounted,
		defineExpose,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import store from '@/common/utils/store'
	let props = defineProps({
			menuSpread: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		}),
		router = useRouter(),
		emit = defineEmits(),
		menuIndex = ref(null),
		choice = (name1, item, index) => {
			store.breadcrumb = [name1, item.name, index] //面包屑
			if (!store.breadcrumbTag) { //转
				store.breadcrumbTag = []
			}
			if (store.breadcrumbTag != '') { //标签
				let push = false;
				for (let i in store.breadcrumbTag) {
					if (store.breadcrumbTag[i].name == item.name) {
						push = false
						break
					} else {
						push = true;
					}
				}
				if (push) {
					store.breadcrumbTag = [...store.breadcrumbTag, item]
				}
			} else {
				store.breadcrumbTag = [item]
			}
			router.push(item.path)
			emit('tagRefresh', 'refresh')
		}
	onMounted(() => {
		if (store.breadcrumb) {
			menuIndex.value = store.breadcrumb[2]
		}
	})
	defineExpose({
		menuIndex
	})
</script>
<style lang="scss" scoped>
	.login {
		height: 100%;
		background: #2f3447;

		.logo {
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;

			.logo-icon {
				width: 90px;
				height: 80px;
				transition: all .3s;
				-webkit-transform: rotate(360deg);
				animation: rotation 15s linear infinite;
				-moz-animation: rotation 15s linear infinite;
				-webkit-animation: rotation 15s linear infinite;
				-o-animation: rotation 15s linear infinite;
			}

			.logo-icon-colse {
				width: 30px;
				height: 30px;
			}
		}

		.el-menu-vertical-demo:not(.el-menu--collapse) {
			width: 230px;
			min-height: 400px;
		}
	}
</style>
